<script setup>
import * as echarts from 'echarts';
import { useI18n } from 'vue-i18n';


const { t } = useI18n();

const state = reactive({
  chart: null
})

onMounted(async () => {
  const chartDom = document.getElementById('chart');
  state.chart = echarts.init(chartDom);

  const res1 = await axiosReq({
    url: '/borrow_logs/use_rate/',
    method: 'get'
  })
  const res2 = await axiosReq({
    url: '/pre_repair_logs/repair_rate/',
    method: 'get'
  })
  state.chart.setOption(generateRadarOption(res1.data, res2.data))
})

onBeforeUnmount(() => {
  if (!state.chart) {
    return
  }
  state.chart.dispose()
  state.chart = null
})

const generateRadarOption = (use_data, repair_data) => {
  return {
    title: {
      text: '各类资产维修/使用率'
    },
    legend: {
      data: ['借用率', '维修率']
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '家具', max: 100 },
        { name: '办公设备', max: 100 },
        { name: '电子设备', max: 100 },
        { name: '通信设备', max: 100 },
      ]
    },
    series: [
      {
        name: '维修/使用',
        type: 'radar',
        data: [
          {
            value: use_data.map(item => item.use_rate),
            name: '借用率',
            lineStyle: {
              width: 2
            }
          },
          {
            value: repair_data.map(item => item.use_rate),
            name: '维修率',
            lineStyle: {
              width: 2
            }
          }
        ]
      }
    ]
  }
}
</script>

<template>
  <div style="width: 100vw;height: 80vh;">
    <div id="chart" class="chart" style="width: 70%;height: 100%;" />
  </div>
</template>